<template>
	<app-layout>
		<view class="mine tn-safe-area-inset-bottom">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar :isBack="!!1" :bottomShadow="false">录入</tn-nav-bar>
			<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<view class="tn-padding-bottom-xl tn-bg-white">
					<tn-list-view :card="true" unlined="all">
						<block>
							<view class="tn-padding ">
								<tn-form :labelWidth="180" :model="form" ref="uForm" :errorType="['message']">
									<tn-form-item label="姓名" prop="username" :required="true">
										<tn-input v-model="form.username" type="text" placeholder='请输入姓名' />
										<tn-button slot="right" backgroundColor="#2074d4" fontColor="#FFFFFF"
											@click="makephoto">拍照识别</tn-button>
									</tn-form-item>
									<tn-form-item label="身份证" prop="sfz" :required="true">
										<tn-input :max-length="18" v-model="form.sfz" type="text"
											placeholder='请输入身份证号' />
									</tn-form-item>
									<tn-form-item label="手机号码" prop="iphone" :required="true">
										<tn-input :max-length="11" v-model="form.iphone" type="text"
											placeholder='请输入手机号码' />
									</tn-form-item>
									<tn-form-item label="采集地址" prop="qydd" :required="true">
										<tn-input v-model="form.qydd" type="text" placeholder='请输入采集地址' />
									</tn-form-item>
									<tn-form-item label="人员类型" prop="leitext" :required="true">
										<tn-input v-model="form.leitext" type="select" :selectOpen="typeshow"
											placeholder='选择人员类型' @click="typeshow = true" />
										<tn-select labelName="name" valueName="id" v-model="typeshow" :list="typelist"
											@confirm="typeconfirm"></tn-select>
									</tn-form-item>
									<tn-form-item label="工作单位" prop="unit">
										<tn-input v-model="form.unit" type="text" placeholder='请输入工作单位' />
									</tn-form-item>
									<tn-form-item label="毛发袋条码" prop="qrcode" :required="true">
										<view class="qrcodet" v-if="!form.qrcode">请扫描条毛发袋条码</view>
										<view v-else>
											条码已记录
										</view>
										<tn-button slot="right" backgroundColor="#2074d4" fontColor="#FFFFFF"
											@click="scancode">扫码</tn-button>
									</tn-form-item>


								</tn-form>
							</view>
						</block>
					</tn-list-view>
				</view>
			</view>
			<bottom-btn @save="save" @submit="submit"></bottom-btn>
			<view class='tn-tabbar-height'></view>
		</view>
	</app-layout>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		mapGetters,
		mapState
	} from 'vuex';

	export default {
		name: 'otheradd',
		mixins: [template_page_mixin],
		data() {
			return {
				typeshow: false,
				typelist: [{
						id: 3,
						name: '驾驶人员'
					},
					{
						id: 4,
						name: '场所从业人员'
					},
					{
						id: 5,
						name: '公共安全岗位人员'
					},
					{
						id: 6,
						name: '其他人员'
					},

				],
				form: {
					username: '',
					sfz: '',
					lei: '',
					iphone: '',
					unit: '',
					lat: '',
					lng: '',
					qydd: '',
					qrcode: ''
				},
				formData: {},
				rules: {
					sfz: [{
							required: true,
							message: '请输入正确的身份证号',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return this.$t.test.idCard(value);
							},
							message: '请输入正确的身份证号',
							trigger: ['change', 'blur'],
						}
					],
					qrcode: [{
						required: true,
						message: '请扫描条毛发袋条码',
						trigger: 'blur,change'
					}],
					qydd: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur,change'
					}],
					leitext: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur,change'
					}],

					username: [{
							required: true,
							message: '请输入中文姓名',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return this.$t.test.chinese(value);
							},
							message: '请输入中文姓名',
							trigger: ['change', 'blur'],
						}
					],
					iphone: [{
							required: true,
							message: '请输入正确的手机号',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return this.$t.test.mobile(value);
							},
							message: '请输入正确的手机号',
							trigger: ['change', 'blur'],
						}
					],
				},
			}
		},

		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},

		watch: {

		},
		onLoad(options) {
			let t = this;
			this.formData = {}

			this.getLocation()
		},
		onShow() {
			let t = this;
			if (!t.userinfo) {
				t.$user.getInfo()
			}
		},
		onReady() {
			// this.$refs.uForm.resetFields()
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {

			save() {},
			getLocation() {
				let t = this;
				this.$jdd.getLocation({
					success(res) {
						t.form.lat = res.latitude
						t.form.lng = res.longitude
						t.form.qydd = res.address
					},
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '获取定位失败,请稍后再试',
							success: function(res) {
								t.goBack()
							}
						});
					}
				})
			},

			//扫码
			scancode() {
				let t = this;
				// #ifndef MP-WEIXIN
				this.$jdd.scanCode({
					success(res) {
						t.form.qrcode = res.text
					},
					fail(err) {}
				})
				// #endif
			},


			submit() {
				let t = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 验证通过
						t.add()
					}
				})
			},
			add(param) {
				let t = this;
				this.$t.message.loading('提交中');
				this.$request({
					url: this.$api.hair.addTemporary,
					data: t.form,
					method: 'POST'
				}).then(response => {
					t.$t.message.closeLoading();
					if (response.code === 0) {
						console.log('respons1e', response)
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
							success() {
								t.init()
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch((msg) => {
					t.$t.message.closeLoading();
				});
			},
			typeconfirm(e) {
				this.form.lei = e[0].value
				this.form.leitext = e[0].label
			},
			init() {
				this.form.username = '';
				this.form.sfz = '';
				this.form.lei = '';
				this.form.iphone = '';
				this.form.unit = '';
				this.form.qrcode = '';
				this.form.leitext = '';
			},

			takephoto() {
				let t = this;
				return new Promise((resolve, reject) => {
					t.$jdd.takePhoto({
						success(res) {
							t.$jdd.reduceImageSize({
								file: [res.path],
								success(re) {
									return resolve(re)
								},
								fail(er) {
									return reject(er)
								}
							})
						},
						fail(err) {
							return reject(err)
						}
					})
				})

			},
			makephoto() {
				let t = this;
				// t.ocrcard('https://img-blog.csdnimg.cn/img_convert/f33abc58d266e0a601d14742bcbcc9b5.png')
				// return 
				t.takephoto().then(res => {
					t.$t.message.loading('正在识别')
					t.$jdd.uploadFile({
						file: res.filePaths,
						success(mediaid) {
							t.$request({
								url: t.$api.upload.getimage,
								method: 'POST',
								data: {
									media_id: mediaid[0],
								}
							}).then(response => {
								t.$t.message.closeLoading()
								if (response.code === 0 && response.info) {
									t.ocrcard(response.info)
								} else {
									t.$t.message.toast('识别失败，请手动填写')
								}
							}).catch(err => {
								t.$t.message.closeLoading()
							})
						},
						fail(err) {
							t.$t.message.closeLoading()
						}
					})
				})
			},
			ocrcard(img) {
				let t = this;
				this.$t.message.loading('正在识别')
				this.$request({
					url: this.$api.user.OcrIdentity,
					method: 'POST',
					data: {
						image: img,
					}
				}).then(response => {
					t.$t.message.closeLoading()
					if (response.code === 0) {
						t.$t.message.toast('识别完成，请确认无误后提交')
						t.form.username = response.info.username
						t.form.sfz = response.info.sfz
					} else {
						t.$t.message.toast('识别失败，请手动填写')
					}
				}).catch(err => {
					t.$t.message.closeLoading()
					t.$t.message.toast('识别失败，请手动填写')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	.qrcodet {
		color: #b3b3b3;
	}
</style>